<template>
    <div class="app-container">
        <iframe :src="src" frameborder="0" width="100%" height="100%" :key="src"
             id="oa-iframe-id"
            class="iframe"
        ></iframe>
    </div>
</template>

<script>
import lodash from 'lodash';

export default {
    data(){
        return{
            src:null
        }
    },
    methods: {
    /**
     * url增加尾缀 以防止拼接参数时出现错误
     * @author 技术运维中心 阮中楠
     * @param { string } urlStr url格式的字符串
     * @returns { string } url格式的字符串
     */
    urlAddSuffix(urlStr) {
      let resUrl = urlStr;
      if (urlStr.indexOf('?') > -1) {
        if (urlStr.lastIndexOf('&') !== 0) {
          resUrl += '&';
        }
      } else {
        resUrl += '?';
      }
      return resUrl;
    },
  },
  computed: {
    /** 目前 路由的值已经实现了及时更新 现在该写法是有意义的 可以实现内容更新的
     * @deprecated 目前不清楚之前是怎么写的了，这个写法事实上被废弃了，不再使用了。
     */
    computedSrc() {
      // 尝试用computed的方式来实现动态更新变化的路由值
      return this.$route.meta.remotePath;
    },

    constHref() {
        console.log('window.frames[0].location.href',window.frames[0].location.href)
      return window.frames[0].location.href;
    },
  },
    mounted(){
        const innerFnV2 = () => {
      const uniqueIdPrefix = 'iframe_prefix_';
      const randomId = lodash.uniqueId(uniqueIdPrefix);

      const addRandomId = (url) =>
        `${this.urlAddSuffix(url)}randomId=${randomId}`;

      console.log('this.$route.meta===',this.$route)
      this.src = addRandomId(this.$route.meta.remotePath);
      // 参考资料 https://blog.csdn.net/cxl444905143/article/details/43766549
      window.frames[0].location.href = addRandomId(this.constHref);

      console.log(' in innerFn this.src ', this.src);
      console.log(
        ' in innerFn window.frames[0].location.href ',
        window.frames[0].location.href
      );
    };

    innerFnV2();
    }
}
</script>

<style lang="scss" scoped>
.app-container{
    height: 100%;
}
</style>